<template>
  <div class="container">
    <el-button type="primary" @click="postType">新增类别</el-button>
    <!-- 自定义文章类型树状结构表 -->
    <el-tree
      ref="typeTree"
      accordion
      :data="oTypeList"
      highlight-current
      node-key="id"
      :props="defaultProps"
    >
      <span slot-scope="{ node, data }" class="custom_tree_node">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-show="data.parent_id == 0"
            size="mini"
            type="text"
            @click.stop="() => append(data)"
          >
            新增
          </el-button>
          <el-button size="mini" type="text" @click.stop="() => edit(data)">
            编辑
          </el-button>
          <el-button size="mini" type="text" @click.stop="() => remove(data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <!-- 嵌套dialog -->
    <el-dialog
      append-to-body
      :title="dialogTitle"
      :visible.sync="dialog"
      width="30%"
    >
      <div>
        <!-- 类型名称 -->
        <div
          v-show="typeName"
          class="flex_y_center"
          style="margin-bottom: 15px"
        >
          <div style="width: 80px; text-align: right">
            <span style="color: red">*</span>
            类型名称：
          </div>
          <div>{{ typeName }}</div>
        </div>
        <!-- 类型名称 -->
        <div class="flex_y_center" style="margin-bottom: 15px">
          <div style="width: 80px; text-align: right">
            <span style="color: red">*</span>
            类型名称：
          </div>
          <el-input
            v-model="docTypeForm.title"
            clearable
            maxlength="50"
            placeholder="请输入类型名称"
            style="width: 200px"
            type="text"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="addDocType">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addHelpType, delHelpType } from '@/api/doc'

  export default {
    props: {
      oTypeList: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'title',
        },
        dialog: false,
        dialogTitle: '',
        typeName: '',
        // 新增/编辑文章类型form
        docTypeForm: {
          id: '',
          title: '',
          parent_id: '',
        },
      }
    },
    watch: {
      dialog(newValue) {
        if (!newValue) {
          for (let item in this.docTypeForm) {
            this.docTypeForm[item] = ''
          }
        }
      },
    },
    methods: {
      // 新增父类型
      postType() {
        this.dialog = true
        this.docTypeForm.parent_id = 0
        this.typeName = ''
      },
      // 新增子类型
      append(data) {
        this.dialogTitle = '新增文章类型'
        this.dialog = true
        this.docTypeForm.parent_id = data.id
        this.typeName = data.title
      },
      // 编辑类型
      edit(data) {
        this.dialogTitle = '编辑文章类型'
        this.dialog = true
        this.typeName = '' // 清空
        // 将编辑所传参数赋值到对象中
        this.docTypeForm.id = data.id
        this.docTypeForm.title = data.title
        this.docTypeForm.parent_id = data.parent_id
        if (data.parent_id != 0) {
          // 循环查找子类型，并将其父类型赋值给typeName变量
          for (let item of this.oTypeList) {
            let typeTitle = item.title
            // 如果存在子类型的话，循环子类型
            if (item.children) {
              for (let itemChild of item.children) {
                if (data == itemChild) {
                  this.typeName = typeTitle
                  return false // 跳出循环
                }
              }
            }
          }
        }
      },
      // 删除类型
      remove(data) {
        if (data.children) {
          this.$message.error('当前类型下有子分类，不可删除')
        } else {
          this.$confirm('是否要删除' + data.title, '删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            const params = {
              id: data.id,
            }
            delHelpType(params).then(() => {
              this.$message.success('删除成功')
              this.$emit('sendData')
            })
          })
        }
      },
      // 添加/编辑文章类型
      addDocType() {
        if (this.docTypeForm.title == '') {
          this.$message.error('请输入类型名称')
        } else {
          // 走新增文章类型接口
          addHelpType(this.docTypeForm).then(() => {
            this.dialog = false
            this.$emit('sendData')
          })
        }
      },
    },
  }
</script>

<style scoped>
  .custom_tree_node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  ::v-deep .el-tree {
    width: 100%;
    height: 100%;
    font-weight: 600;
    padding-top: 10px;
  }
  ::v-deep .el-tree-node {
    white-space: normal;
  }
  ::v-deep .el-tree-node__content {
    padding: 18px 0;
  }

  .container {
    max-height: 80%;
    overflow: auto;
  }
</style>
